
<template>
  <div>
    <canvas ref="canvas" id="canvas"></canvas>
  </div>
</template>
<script setup  lang="ts" >
import { getAssetURL, equipFindOne, getRealm } from '@/utils/index.ts'
import { useWinSize } from '@/utils/win.ts'
import { ref, defineProps, computed, onMounted } from 'vue'
const prop = defineProps({
  userList: Array
})
var strs = []
const size = useWinSize()
var canvas = null
onMounted(() => {
  canvas = document.querySelector('canvas')
  strs = prop.userList
  getCancas()
})
var index = 0
var pixs = []
var colors = ['#F56C6C', '#F56C6C', '#F56C6C', '#409EFF', '#F56C6C', '#409EFF']
var textcanvas = null
var tctx = null
var ctx = null
let x, y
function getCancas() {
  canvas.width = size.value.width
  canvas.height = 290
  ctx = canvas.getContext('2d')
  textcanvas = document.createElement('canvas')
  tctx = textcanvas.getContext('2d')
  init()
  setInterval(draw, 10)
}
function textdata(i) {
  var textsize = check(strs[i])
  textcanvas.width = textsize[0]
  textcanvas.height = textsize[1]
  tctx.clearRect(0, 0, textcanvas.width, textcanvas.height)
  tctx.font = '40px Arial'
  tctx.fillStyle = 'white'
  tctx.fillText(strs[i], 0, 40)
  return tctx.getImageData(0, 0, textcanvas.width, textcanvas.height)
}
var particalsArray = []
class Partical {
  constructor(x, y) {
    this.x = x
    this.y = y
    this.vy = Math.random() - 1.5
    this.vx = 0.5 - Math.random()
    this.g = 0.01
    this.color = colors[(Math.random() * colors.length) | 0]
    this.wait = 80
  }
  update() {
    if (this.wait < 0) {
      this.x += this.vx * 2
      this.y += this.vy * 2
      this.vy += this.g
    }
    this.wait--
  }
  draw() {
    ctx.beginPath()
    ctx.arc(this.x, this.y, 2, 0, Math.PI * 2)
    ctx.fillStyle = this.color
    ctx.fill()
  }
}
function init() {
  pixs = textdata(index % strs.length)
  for (var i = 0; i < pixs.data.length / 4; i++) {
    if (pixs.data[i * 4 + 3] != 0) {
      x = (i % textcanvas.width) * 2 + (canvas.width - textcanvas.width * 2) / 2
      y = ((i / textcanvas.width) | 0) * 2 + (canvas.height - textcanvas.height * 2) / 2
      particalsArray.push(new Partical(x, y))
    }
  }
  index++
}
function check(str) {
  var span = document.createElement('span')
  span.className = 'check'
  span.textContent = str
  span.style.display = 'inline-block'
  span.style.fontFamily = 'Arial, Helvetica, sans-serif'
  span.style.fontSize = '40px'
  document.body.appendChild(span)
  var w = span.clientWidth
  var h = span.clientHeight
  document.body.removeChild(span)
  return [w, h]
}
function draw() {
  if(canvas){
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  for (var i = 0; i < particalsArray.length; i++) {
    var partical = particalsArray[i]
    partical.update()
    partical.draw()
    if (partical.y > canvas.height) {
      particalsArray.splice(i, 1)
    }
    if (particalsArray.length == 0) {
      init()
    }
  }
  }
}
</script>
